<template>
	<z-paging ref="paging" v-model="searchData" @query="queryList" :show-loading-more-no-more-view="false" inside-more >
		<template slot="top">
			<cl-navbar autoBack placeholder :title="$t('chat.msg.type.photoVideo')"></cl-navbar>
		</template>
		<view style="padding: 0 30rpx;display: flex;flex-wrap: wrap;gap:13rpx">
			<template v-for="(item, index) in searchData">
				<view style="width: 690rpx;" v-show="index === 0 || !sameMonth(item, searchData[index - 1])">
					{{$u.timeFormat(item.create_time, 'yyyy年mm月')}}
				</view>
				<template v-for="(it,idx) in mediaAttachments(item)">
					<view style="display:flex" :key="idx + '' + index">
						<cl-chat-image :srckey="it.image.url" v-if="it.image" :msgindex="index" :zuindex="idx" :isPreview="true" :imageStyle="{width: '220rpx',height:'220rpx'}"></cl-chat-image>
						<view class="videoView" v-else  @click="previewVideo(it.video.url)">
							<cl-chat-image :srckey="it.video.thumb_url" :noclick="true" :imageStyle="{width: '220rpx',height:'220rpx'}"></cl-chat-image>
							<image src="@/static/play.png" mode="" class="playimg"></image>
						</view>
					</view>
				</template>
			</template>
		</view>
	</z-paging>
</template>

<script>
	import msgSqlite from '@/sqlite_services/msg.js'
	import {
		mapState
	} from 'vuex'
	import {
		replaceEmojis
	} from '@/components/cl-chat-input/o-emoji/emoji.js';
	
	export default {
		name: 'chatHistory',
		data() {
			return {
				searchval:'',
				searchData:[]
			}
		},
		computed: {
			...mapState({
				chatInfo: state => state.chat.chatInfo
			}),
			mediaAttachments() {
				return (item) => {
					return item.content_text.filter(a => a.image || a.video);
				}
			}
		},
		onLoad() {
			console.log(this.chatInfo);
		},
		onUnload(){
			//清空一下放大图片的存储
			this.$store.commit('setImages',[])
		},
		methods: {
			// 判断两个日期是否是同一个月份
			sameMonth(item1, item2) {
				if (!item1 || !item2) return false;
				const date1 = new Date(item1.create_time);
				const date2 = new Date(item2.create_time);
				return date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
			},
			queryList(pageNo, pageSize){
				let offset = this.searchData.length
				if(pageNo == 1){
					offset = 0
				}
				msgSqlite.getMsgSortList({
					chat_type:'group',
					msg_type:['mixed','image','video'],
					uuid:this.chatInfo.uuid
				},{
					pageSize,
					offset
				}).then(results => {
					if (results) {
						results.map((result,index) => {
							result.content_text = JSON.parse(result.content_text)
						});
						this.$refs.paging.complete(results);
					}
				}).catch(e => {
					this.$refs.paging.complete(false);
				})
			},
			
			previewVideo(url) {
				this.$Router.push({
					name: 'video',
					params: {
						video: url
					}
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-wrap: wrap;
	}
	.videoView {
		position: relative;
		width: 220rpx;
	
		.playimg {
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -50rpx;
			/* 元素高度的一半 */
			margin-left: -50rpx;
			/* 元素宽度的一半 */
		}
	}
</style>